<template>
	<view class="content">
		<view class="content-bg">
			<uni-table ref="table" :loading="loading"  stripe >
				<uni-tr>
					<uni-th align="center">工单编号</uni-th>
					<uni-th align="center">产品编码</uni-th>
					<uni-th align="center">产品名称</uni-th>
					<uni-th width="80" align="center">计划数</uni-th>
					<uni-th width="80" align="center">上线数</uni-th>
					<uni-th width="80" align="center">完成数</uni-th>
					<uni-th width="80" align="center">合格率</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" style="white-space: nowrap;">{{ item.f_workorder }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.product_code }}</uni-td>
					<uni-td align="center" style="white-space: nowrap;">{{ item.product_name }}</uni-td>
					<uni-td align="center">{{ item.plannum }}</uni-td>
					<uni-td align="center">{{ item.onlinenum }}</uni-td>
					<uni-td align="center">{{ item.completenum }}</uni-td>
					<uni-td align="center">{{ item.hgl ? item.hgl : 0 }}%</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
			 
		</view>
		<view class="content-bg">
			<view class="line-container">
			    <view class="line"></view>
			    <view class="text">计划达成率曲线</view>
			    <view class="line"></view>
			  </view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="{dataLabel:false,xAxis:{rotateLabel:true},extra:{column:{type:'stack',width:10}}}" :chartData="chartsData"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {GetWorkorderplanDetail} from "../../common/workorder_api.js"
	import * as util from '../../common/util.js'
	
	export default {
		data() {
			return {
				loading: false,
				srcData: [],
				tableData:{},
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				chartsData:{},
			};
		},
		onLoad(){
			this.loadData();
		},
		methods:{
			loadData(){
				GetWorkorderplanDetail().then(res=>{
					console.log("GetWorkorderplanDetail", res);
					this.srcData = res;
					this.getData(1);
					this.setChartData(res);
				});
			},
			getData(pageCurrent, value = ''){
				console.log("pageCurrent:" + pageCurrent);
				this.loading = true
				this.pageCurrent = pageCurrent
				util.getPageData({
					srcData: this.srcData,
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.getData(e.current)
			},
			
			setChartData(data){
				var categories = [];
				
				var plannums = [];
				var completenums = [];
				data.forEach(item => {
					categories.push(item.product_name);
					plannums.push(item.plannum);
					if (item.completenum){
						completenums.push(item.completenum);
					} else {
						completenums.push(0);
					}
				});
				var series = [
					{
						"name": "计划数",
						"data": plannums
					},
					{
						"name": "完成数",
						"data": completenums
					}
				];
				var ata = {
					"categories": categories,
					"series": series
				};
				this.chartsData = ata;
			}
		}
	}
</script>

<style lang="scss">
	@import url("schedule-detail.css");
</style>
